<template>
  <ul class="vue-tree">
    <draggable
      class="d-flex flex-column tag-box-ul"
      :list="treeData"
      :group="{ name: 'people', pull: 'clone', put: false }"
      :clone="cloneDog"
    >
      <TreeItem
        v-for="(item, index) in treeData"
        :key="index"
        :tree-item-data="item"
        :clone-dog="cloneDog"
        :name-key="nameKey"
        :children-key="childrenKey"
      />
    </draggable>
  </ul>
</template>

<script>
import draggable from 'vuedraggable';
import TreeItem from './TreeItem';
export default {
  name: 'VueTreeMenu',
  components: {
    TreeItem,
    draggable
  },
  props: {
    // 树形控件数据
    nameKey: {
      type: String,
      default: 'text'
    },
    childrenKey: {
      type: String,
      default: 'ftmAtaChapter'
    },
    treeData: {
      type: Array,
      default() {
        return [];
      }
    },
    // 节点点击事件
    cloneDog: {
      type: Function,
      default() {
        return function() {};
      }
    }
  }

};
</script>

<style lang="less">
@import './index.less';
</style>
